<template>
  <scroll-view
    :class="'wuc-tab ' + tabClass"
    scroll-with-animation
    scroll-x
    :scroll-left="scrollLeft"
    :show-scrollbar="false"
  >
    <view class="wuc-contanier-tab">
      <view
        class="wuc-tab-item"
        :class="[index === tabCur ? 'cur' : '']"
        v-for="(item, index) in tabList"
        :key="index"
        :id="index"
        @tap="tabSelect(index, $event)"
      >
        <text>{{ item.name }}</text>
        <text
          v-if="item.arrow"
          class="price-icon"
          :class="[item.sort === 'desc' ? 'down' : 'up']"
        ></text>
      </view>
    </view>
  </scroll-view>
</template>
<script>
/* eslint-disable */
export default {
  name: 'wuc-tab',
  data() {
    return {}
  },
  props: {
    tabList: {
      type: Array,
      default() {
        return []
      },
    },
    tabCur: {
      type: Number,
      default() {
        return 0
      },
    },
    tabClass: {
      type: String,
      default() {
        return ''
      },
    },
  },
  methods: {
    tabSelect(index, e) {
      if (this.currentTab === index) return false
      this.$emit('update:tabCur', index)

      this.$emit('change', index, this.tabList[index])
    },
  },
  computed: {
    scrollLeft() {
      return (this.tabCur - 1) * 80
    },
  },
}
</script>
<style lang="scss">
@import '@/styles/variables.scss';
.wuc-tab {
  background-color: #fff;
  padding: 0 30rpx;
  /* 针对 H5 端 */
  ::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  .wuc-contanier-tab {
    background-color: #fff;
    white-space: nowrap;

    .wuc-tab-item {
      margin: 24rpx 0;
      height: 72rpx;
      line-height: 72rpx;
      border-radius: 36rpx;
      display: inline-block;
      font-size: $font-size;
      text-align: center;
      font-weight: normal;
      padding: 0 30rpx;
      color: #4b5563;
      background-color: #f3f4f6;
      &.cur {
        color: #fff;
        background-color: #2e8b57;
        .down {
          &::after {
            content: '\e618';
            font-family: 'iconfont' !important;
            color: $color;
            font-size: 38rpx;
            margin-left: -8rpx;
            vertical-align: middle;
          }
        }
        .up {
          &::after {
            content: '\e61b';
            font-family: 'iconfont' !important;
            color: $color;
            font-size: 38rpx;
            margin-left: -8rpx;
            vertical-align: middle;
          }
        }
      }

      .down {
        &::after {
          content: '\e618';
          font-family: 'iconfont' !important;
          color: #4b5563;
          font-size: 38rpx;
          margin-left: -8rpx;
          vertical-align: middle;
        }
      }
      .up {
        &::after {
          content: '\e61b';
          font-family: 'iconfont' !important;
          color: #4b5563;
          font-size: 38rpx;
          margin-left: -8rpx;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
